<template>
  <view>
   <u-navbar :is-back="false" title=" " :border-bottom="false">
      <view class="slot-wrap">
        <u-tabs 
        name="cate_name" 
        :list="list" 
        :is-scroll="false" 
        :current="current" 
        @change="changeTab" 
        active-color="#333"
        inactive-color="#666"
        font-size="28"
        :active-item-style="tabActiveStyle"
        :bar-style="barActiveStyle"
        ></u-tabs>
      </view>
    </u-navbar>
    <view>
      <new-car :tab-index="current" v-show="current === 1" />
      <car-maintenance ref="carMaintenance" :tab-index="current" v-show="current === 0" />
    </view>
  </view>
</template>

<script>
  import newCar from './components/newCar.vue'
  import carMaintenance from './components/carMaintenance.vue'
  export default {
    components: {
      newCar,
      carMaintenance
    },
    data() {
      return {
        tabActiveStyle: {
          'font-weight': 'bold',
          'font-size': '38rpx'
        },
        barActiveStyle: {
          'background': 'linear-gradient(0deg, #FBB000, #FFE23E)'
        },
        list: [{
          cate_name: '养车门店'
        }, {
          cate_name: '新车门店'
        }],
      }
    },
    computed: {
      current() {
        return this.$store.state.changeIndex
      }
    },
    methods: {
      changeTab(index) {
        this.$store.commit('setChangeIndex', index)
        // this.current = index
      }
    },
    onLoad(option) {
      // this.current = option.status ? Number(option.status) : 0
      this.$store.commit('setChangeIndex', option.status ? Number(option.status) : 0)
    },
    onShow() {
      this.$nextTick(() => {
        if(this.current === 0) {
          this.$refs.carMaintenance.getMyLoveCar()
        }
      })
    },
    onReachBottom() {
      uni.$emit('storeLoadMore', this.current)
    },
    onPageScroll(e) {
      uni.$emit('storePageScroll', {
        e,
        current: this.current
      })
    },
    onUnload() {
      uni.$off('storeLoadMore')
      uni.$off('storePageScroll')
    }
  }
</script>

<style>
page{
  background-color: #f6f6f6;
}
</style>

<style lang="scss" scoped>
.slot-wrap{
  width: 100%;
  padding: 0 100rpx;
  box-sizing: border-box;
}
</style>
